<template>
  <div>
    <el-form ref="loginForm" :rules="rules" :model="loginForm" label-width="80px" :label-position="labelPosition"
             v-loading="loading" class="loginContainer">
      <h3>系统登录</h3>
      <!-- 账号 -->
      <el-form-item label="账户" prop="username">
        <el-input type="text" v-model="loginForm.username" placeholder="请输入账号"></el-input>
      </el-form-item>
      <!--  密码 -->
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <!-- 验证码-->
      <el-form-item label="验证码" prop="code">
        <el-input type="text" v-model="loginForm.code" placeholder="请输入验证码" style="width:150px"></el-input>
        <img :src="captchaUrl" @click="updataCaptcha" alt="">
      </el-form-item>
      <el-checkbox label="记住我" v-model="checked" name="type" class="remember"></el-checkbox>
      <el-button type="primary" style="width:100%" @click='submitLogin'>登录</el-button>
    </el-form>
  </div>
</template>
<script>
/*import {postRequest} from '../utils/api.js'*/
import axios from "axios";

export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      labelPosition: 'left',
      captchaUrl: '/api/captcha?time=' + new Date(),
       checked:false,
      loginForm: {
        username: 'admin',
        password: '123',
        code: '',
        checked: ''
      },
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
      }
    }
  },
  methods: {
    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        //表单格式正确
        if (valid) {
          this.loading = true,
              axios({
                method: 'post',
                url: '/api/login',
                data: this.loginForm
              }).then(res => {

                this.loading = false;
                const tokenStr = res.data.obj.tokenHead + res.data.obj.token;
                window.sessionStorage.setItem('tokenStr', tokenStr);
                //页面跳转
             /*   let path = this.$router.query.redirect;
                this.$router.replace((path==='/'||path===undefined)?'/home':path)*/
                this.$router.replace('/home');

              })
          /*     postRequest('/api/login',this.loginForm).then(res=>{
                   console.log(res)
                   if(res){
                     //const tokenStr = res.obj.tokenHead+res.obj.token
                     //window.sessionStorage.setItem('tokenStr',tokenStr)
                     //跳转到首页
                     this.$router.replace('/home')
                   }
                 })*/
        } else {
          this.$message({
            message: '没长眼?不会按格式输？',
            type: 'warning'
          });
          return false;
        }
      });
    },
    //更新验证码
    updataCaptcha() {
      this.captchaUrl = '/api/captcha?time=' + new Date()
    }
  },
}
</script>
<style scoped>
h3 {
  text-align: center;
}

.loginContainer {
  margin: 180px auto;
  width: 300px;
  padding: 15px 30px 15px 30px;
  border: 1px solid #f7f7f7;
  box-shadow: 0 0 10px gray;
  border-radius: 15px;
}

.remember {
  margin: 0 0 10px 0;
}
</style>